<template>
 <div class="cart">
   <!-- {{cart}} -->
    <div class="cartcontent">
      <van-swipe-cell v-for="(item,index) in cart" :key="item.id">
        <van-checkbox class="v-checkbox-one" v-model="item.flag" @click="changesingle(key,item.flag)"></van-checkbox>
        <van-card
        :num="item.number"
        :price="item.price"
        :desc="item.skuname"
        :title="item.title"
        :thumb="item.pic">
          <template #footer>
            <van-stepper v-model="item.number" @plus="jiaNum(index)" @minus="jianNum(index)"/>
          </template>
          </van-card>
          <template #right>
            <van-button class="delete-button" type="danger" size="mini" @click="del(index)">删除商品</van-button>
          </template>
      </van-swipe-cell>
    </div>
    <footer>
      <van-submit-bar :price="count*100" button-text="提交订单">
        <van-checkbox v-model="flag" @click="change">全选</van-checkbox>
      </van-submit-bar>
    </footer>
 </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      flag: false
    };
  },
  mounted() {},
  methods: {
    change() {
      if (this.flag) {
        this.all();
      } else if (this.noflag == 0) {
        this.no();
      }
    },
    changesingle(index, flag) {
      var obj = { index: index, flag: flag };
      this.single(obj);
      this.flag = this.chan;
    },
    jiaNum(index) {
      this.addCartNum(index);
    },
    jianNum(index) {
      this.cutNum(index);
    },
    del(index) {
      this.delOne(index);
    },
    ...mapMutations(["addCartNum", "cutNum", "delOne", "all", "no", "single"])
  },
  computed: {
    ...mapState(["cart"]),
    ...mapGetters(["count", "chan", "noflag"])
  },
  watch: {}
};
</script>

<style scoped>
.cart {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.delete-button {
  height: 100%;
}
.van-swipe-cell {
  padding-left: 30px !important;
  position: relative;
}
.v-checkbox-one {
  position: absolute !important;
  top: 40% !important;
  left: -20px !important;
  z-index: 999 !important;
}
.van-submit-bar {
  bottom: 50px !important;
}
</style>